<Page [ngClass]="'popup'" [title]="'Popup'" [subTitle]="'pop pop pop it up'" [ftBottom]="true">
  <button weui-button [weui-type]="'default'" (click)="simplePopup.show()">Popup</button>
  <button weui-button [weui-type]="'default'" (click)="fullPopup.show()">Full pagePopup</button>
  <button weui-button [weui-type]="'default'" (click)="onSub()">Popup Subscribe</button>

  <!--将Popup组件放在底部-->
  <weui-popup #simple>
    <div class="weui-grids">
      <a class="weui-grid" href="javascript:;">
        <div class="weui-grid__icon">
          <img
            src="" />
        </div>
        <p class="weui-grid__label">Grid</p>
      </a>
      <a class="weui-grid" href="javascript:;">
        <div class="weui-grid__icon">
          <img
            src="" />
        </div>
        <p class="weui-grid__label">Grid</p>
      </a>
      <a class="weui-grid" href="javascript:;">
        <div class="weui-grid__icon">
          <img
            src="" />
        </div>
        <p class="weui-grid__label">Grid</p>
      </a>
      <a class="weui-grid" href="javascript:;">
        <div class="weui-grid__icon">
          <img
            src="" />
        </div>
        <p class="weui-grid__label">Grid</p>
      </a>
      <a class="weui-grid" href="javascript:;">
        <div class="weui-grid__icon">
          <img
            src="" />
        </div>
        <p class="weui-grid__label">Grid</p>
      </a>
      <a class="weui-grid" href="javascript:;">
        <div class="weui-grid__icon">
          <img
            src="" />
        </div>
        <p class="weui-grid__label">Grid</p>
      </a>
    </div>
  </weui-popup>
  <weui-popup #full [config]="{ is_full: true }">
    <article class="weui-article">
      <h1>H1 Heading</h1>
      <section>
        <h2 class="title">H2 Title</h2>
        <section>
          <h3>H3 Heading</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat. Duis aute
          </p>
          <p>
            <img
              src=""
              alt="true" /><img
              src=""
              alt="true" />
          </p>
        </section>
        <section>
          <h3>H3 Heading</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </section>
      </section>
      <button class="weui-btn weui-btn_primary" (click)="full.close()">Close Popup</button>
    </article>
  </weui-popup>
  <weui-popup #subscribe>
    <example-msg-fail></example-msg-fail>
  </weui-popup>
</Page>
